Style Customization

Midone use SASS as a default css preprocessing, you can found all the SASS files in one single place at /resources/sass/* directory. Every single component SASS file are imported in /resources/sass/app.scss. You can modify this file to add or remove components depends to your needs. Here is the part things you need to know about the /resources/sass/app.scss structure and functions.

• Fonts: This section is supposed to import all the template used fonts.
• Breakpoint: This file is contains screen breakpoint variables that used by the template components.
• 3rd Parties: This section supposed to import all 3rd parties SASS or CSS files.
• Animations: This section supposed to import all custom animations used by the template.
• Components: This section supposed to import all component SASS files used by the template.

 
                         
                            // Fonts
                            @import 'fonts/roboto';

                            // Breakpoint
                            @import 'breakpoint';

                            // 3rd Parties
                            @import '~tiny-slider/src/tiny-slider';
                            @import '~highlight.js/scss/github';
                            @import '~tippy.js/dist/tippy';
                            @import '~tippy.js/themes/light';
                            @import '~tippy.js/dist/svg-arrow';
                            @import '~tippy.js/animations/shift-away';
                            @import '~tail.select/css/default/tail.select-light';
                            @import '~toastify-js/src/toastify';
                            @import '~dropzone/dist/dropzone';
                            @import '~zoom-vanilla.js/dist/zoom';
                            @import '~tabulator-tables/dist/css/tabulator';

                            // Animations
                            @import 'typing-dots';
                            @import 'zoom-in';
                            @import 'intro';

                            // Components
                            @import 'top-bar';
                            @import 'app';
                            @import 'login';
                            @import 'mini-chat-box';
                            @import 'mini-chat-list';
                            @import 'mini-chat';
                            @import 'table';
                            @import 'table-report';
                            @import 'report-timeline';
                            @import 'report-chart';
                            @import 'search';
                            @import 'input';
                            @import 'button';
                            @import 'notification';
                            @import 'image-fit';
                            @import 'box';
                            @import 'report-box';
                            @import 'global';
                            @import 'content';
                            @import 'top-nav';
                            @import 'side-nav';
                            @import 'breadcrumb';
                            @import 'tailwind';
                            @import 'top-bar-boxed';
                            @import 'mobile-menu';
                            @import 'pagination';
                            @import 'dropdown';
                            @import 'modal';
                            @import 'tab';
                            @import 'checkbox';
                            @import 'file';
                            @import 'inbox-filter';
                            @import 'inbox';
                            @import 'scrollbar';
                            @import 'chat';
                            @import 'boxed-tabs';
                            @import 'chat-dropdown';
                            @import 'wizard';
                            @import 'blog';
                            @import 'news';
                            @import 'pricing-tabs';
                            @import 'accordion';
                            @import 'error-page';
                            @import 'tippy';
                            @import 'tabulator';
                            @import 'tail-select';
                            @import 'ckeditor';
                            @import 'dropzone';
                            @import 'search-result';
                            @import 'mini-report-chart';
                            @import 'notification-content';
                            @import 'report-maps';
                            @import 'pos-dropdown';
                            @import 'pos';
                            @import 'toastify';
                            @import 'post';
                            @import 'litepicker';
                            @import 'tiny-slider';
                            @import 'pristine';
                            @import 'zoom-vanilla';
                            @import 'dark-mode-switcher';